<template>
  <view class="category-page">
    <!-- 左侧一级分类 -->
    <scroll-view scroll-y class="category-left" :style="{ height: scrollHeight }">
      <block v-for="(item, index) in categories" :key="item.id">
        <view
          :class="['category-item', currentIndex === item.id ? 'active' : '']"
          @click="selectCategory(item)"
        >
          {{ item.name }}
        </view>
      </block>
    </scroll-view>

    <!-- 右侧商品信息 -->
    <scroll-view scroll-y class="category-right" :style="{ height: scrollHeight }">
      <view v-if="selectedCategory">
        <uni-list>
          <uni-list-item
            v-for="product in selectedCategory.products"
            :key="product.id"
            :title="product.name"
            :note="'￥' + product.price"
            :thumb="product.image"
            link
            @click="goToProductDetail(product.id)"
          />
        </uni-list>
      </view>
      <view v-else>请选择一个分类</view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import {onLoad} from '@dcloudio/uni-app'

// 模拟数据：这里应该替换为从API获取的数据
const categories = ref([
  {
    id: 1,
    name: '电子产品',
    products: [
      // 产品数据...
      { id: 101, name: '手机', price: 3999, image: '/static/product1.jpg' },
      { id: 102, name: '电脑', price: 4999, image: '/static/product2.jpg' },
      // 更多产品...
    ],
  },
  {
    id: 2,
    name: '服装',
    products: [
      // 产品数据...
      { id: 201, name: '毛衣', price: 3999, image: '/static/product1.jpg' },
      { id: 202, name: '裤子', price: 4999, image: '/static/product2.jpg' },
      // 更多产品...
    ],
  },
  // 更多一级分类...
]);

// 当前选中的一级分类ID
const currentIndex = ref(null);

// 根据当前索引计算选中的分类
const selectedCategory = computed(() => categories.value.find(category => category.id === currentIndex.value));

// 点击选择分类
function selectCategory(category) {
  currentIndex.value = category.id;
}

// 跳转到商品详情页
function goToProductDetail(productId) {
  uni.navigateTo({
    url: `/pages/product-detail/product-detail?id=${productId}`,
  });
}

// 计算视口高度以设置scrollView的高度
let resizeObserver;
const scrollHeight = ref('100vh');

onMounted(() => {
  function updateScrollHeight() {
    const query = uni.createSelectorQuery().in(this);
    query.select('.category-page').boundingClientRect(data => {
      if (data) {
        scrollHeight.value = `${data.height}px`;
      }
    }).exec();
  }

  updateScrollHeight();
  resizeObserver = uni.onWindowResize(updateScrollHeight);
});

onUnmounted(() => {
  if (resizeObserver) {
    uni.offWindowResize(resizeObserver);
  }
});

// 页面加载时自动选择第一个分类
onLoad(() => {
  if (categories.value.length > 0) {
    selectCategory(categories.value[0]);
  }
});
</script>

<style scoped>
.category-page {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.category-left {
  width: 30%;
  background-color: #f7f7f7;
  border-right: 1px solid #ddd;
}

.category-item {
  padding: 15px;
  text-align: center;
  cursor: pointer;
}

.category-item.active {
  background-color: #fff;
  font-weight: bold;
  color: #007aff;
}

.category-right {
  flex-grow: 1;
  padding: 10px;
}
</style>